<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS代码</title>
    
    <!-- 行内样式 -->
    <!-- <style>
        p{
            color:blue;
            font-size:20px;
        }
    </style> -->

    <!-- 外部样式 -->
    <!-- <link rel="stylesheet" href="dome1.css"> -->


    <style>
        /* 标签选择器 */
        /* p{
            color: red;
        } */


        /* 类选择器*/
        /* .test{
            color:blue
        } */

        /* id选择器 */
        /* #aaa{
            color: pink
        } */

        /* *选择器 */
        /* *{
            color: red;
            font-size: 30px;
        } */

        /* 后代选择器 */
        /* div ul li{
            color: rgb(196, 196, 17);
        } */

        /* 子代选择器 */
        div ul>ol>li{
            color:orange;
        }
    
        
        

    </style>
</head>
<body>
    <!-- <p>段落1</p> -->


    <!-- 内部样式 -->
    <!-- <p style = "color: green; font-size: 30px; ">段落2</p> -->

    <!-- <div>
        太阳照常升起
    </div> -->

    <!-- <p>段落3</p>
    <p>段落4</p> -->

    <!-- <a href="#" class = "test">超链接</a> -->


    <!-- <p id="aaa">段落5</p>
    <p>段落6</p>
    <p>段落7</p> -->
    
    <!-- <div>
        <ul>
            <li>张三</li>
            <li>
                <p>五星好市民 </p>
                <p>法外狂徒</p>
            </li>
        </ul>
        
    </div> -->

    <div>
        <ul>
            <ol>
                <li>男孩</li>
                <p>孤勇者</p>
            </ol>
        </ul>
    </div>
    
    <div>
        <ul>
            <ol>
                <li>张三</li>
                <p>好市民</p>
            </ol>
        </ul>
    </div>

</body>
</html>